.toggle-button_searchbar {
    display: flex;
    position: relative;
    transition: all .5s;
    visibility: visible;
}

.searchInputSearchBarNew input {
     background:var(--color_company_6);
    width: 0;
    outline: none;
    border: none;
    border-radius: 15px 0 0 15px;
    padding: 0 1% 0 1%;
    font-size: 18px;
}
.toggle-button {
    width: 0;
    border: none;
    padding: 0;
    visibility: hidden;
    background-color: var(--color_company_3);
    color: #fff;
}

.active_button{
    width: 120px;
    border: 1px solid #c2c2c2;
    border-radius: 15px 0 0 15px;
    visibility: visible;
}
.lupa-toggle_searchbar {
    transition: all .5s linear;
}
.searchInputSearchBarNew input.toggle-input {
    width: 0;
    border: none;
    padding: 0;
    transition: all .5s linear;
    border-radius: 0 15px 15px 0;
    border-left: none;
    background-color: var(--color_company_6);
    height: 40px;
}

.searchInputSearchBarNew input.toggle-button_active {
    width: 500px;
    border: 1px solid #c2c2c2;
    border-right: none;
    border-radius: 15px 0px 0px 15px;
    padding-left: 15px;

}

#lupa-toggle_searchbar.active {
    border-top: 1px solid #c2c2c2 ;
    border-bottom: 1px solid #c2c2c2;
    border-right: 1px solid #c2c2c2;
    border-radius: 0 15px 15px 0;
    padding-right: 15px;
    width: 30px !important;
    background-color: var(--color_company_6);
    cursor: pointer !important;
}

#logo_nav_desk {
    transition: all .2s linear;
}

#logo_nav_desk.hidden-img {
    visibility: hidden;
    transition: all .2s linear;
}

@media (max-width: 900px) {
    .toggle-button_searchbar {
        display: none;
    }
    
}